const statusClassMap = {
  success: 'card--success',
  warning: 'card--warning',
  error: 'card--error',
  info: 'card--info'
};

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },

  properties: {
    title: {
      type: String,
      value: ''
    },
    subtitle: {
      type: String,
      value: ''
    },
    badgeText: {
      type: String,
      value: ''
    },
    status: {
      type: String,
      value: ''
    },
    interactive: {
      type: Boolean,
      value: false
    },
    elevated: {
      type: Boolean,
      value: false
    },
    padding: {
      type: Boolean,
      value: true
    },
    footer: {
      type: String,
      value: ''
    }
  },

  data: {
    statusClass: '',
    showHeader: false,
    hasFooter: false,
    headerSlot: false,
    footerSlot: false
  },

  lifetimes: {
    attached() {
      this.computeDerived();
    }
  },

  observers: {
    'title, subtitle, badgeText, status, footer'(title, subtitle, badgeText, status, footer) {
      this.computeDerived({ title, subtitle, badgeText, status, footer });
    }
  },

  methods: {
    computeDerived(payload = {}) {
      const { title, subtitle, badgeText, status, footer } = Object.assign(
        {
          title: this.properties.title,
          subtitle: this.properties.subtitle,
          badgeText: this.properties.badgeText,
          status: this.properties.status,
          footer: this.properties.footer
        },
        payload
      );

      const statusClass = statusClassMap[status] || '';
      const showHeader = !!(title || subtitle || badgeText || this.data.headerSlot);
      const hasFooter = !!(footer || this.data.footerSlot);

      this.setData({
        statusClass,
        showHeader,
        hasFooter
      });
    },

    onTap() {
      if (!this.data.interactive) {
        return;
      }
      this.triggerEvent('tap');
    },

    onHeaderSlotChange() {
      if (!this.data.headerSlot) {
        this.setData({ headerSlot: true }, () => this.computeDerived());
      }
    },

    onFooterSlotChange() {
      if (!this.data.footerSlot) {
        this.setData({ footerSlot: true }, () => this.computeDerived());
      }
    }
  }
});
